<template>
	<view>
		<u-navbar title="操作监控" :autoBack="true" placeholder>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view class="video-box">
				<live-player
				  :src="detail.liveUrl"
				  autoplay
				  style="width: 100%; height: 430rpx;"
				  object-fit="fillCrop"
				  @statechange="statechange"
				  @error="error"
				  background-mute
				>
					<cover-view v-if="liveState !== 'success' " class="live-loading">{{liveStateText[liveState]}}</cover-view>
					
				</live-player>
			</view>
			<!-- <view class="video-title">云台控制</view>
			<view class="button-group">
				<view class="outter-circle">
					<view class="inner-parts" :style="{backgroundColor: active === 'up' ? appColor : '#fff'}" @touchend="reset" @touchstart="handlePress('up')">
						<view class="rotate">
							<u-icon name="arrow-up" :color="active === 'up' ? '#fff' : appColor" size="24"></u-icon>
						</view>
					</view>
					<view class="inner-parts" :style="{backgroundColor: active === 'right' ? appColor : '#fff'}" @touchend="reset" @touchstart="handlePress('right')">
						<view class="rotate">
							<u-icon name="arrow-right" :color="active === 'right' ? '#fff' : appColor" size="24"></u-icon>
						</view>
					</view>
					<view class="inner-parts" :style="{backgroundColor: active === 'left' ? appColor : '#fff'}" @touchend="reset" @touchstart="handlePress('left')">
						<view class="rotate">
							<u-icon style="position: relative;left: -8rpx;" name="arrow-left" :color="active === 'left' ? '#fff' : appColor" size="24"></u-icon>
						</view>
					</view>
					<view class="inner-parts" :style="{backgroundColor: active === 'down' ? appColor : '#fff'}" @touchend="reset" @touchstart="handlePress('down')">
						<view class="rotate">
							<u-icon name="arrow-down" :color="active === 'down' ? '#fff' : appColor" size="24"></u-icon>
						</view>
					</view>

					<view class="inner-circle" bindtap="button" data-type="ok">
						<text class="ok rotate"></text>
					</view>
				</view>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				liveStateText: {
					'loading': '加载中...',
					'success': '',
					'fail': '设备离线...',
				},
				liveState: 'loading', // loading fail success
				active: '',
				timer: null
			}
		},
		computed: {
			...mapState(['detail']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
		methods: {
			statechange(e){
				if(e.detail.code == 2003 || e.detail.code == 2032) {
					this.liveState = 'success';
				} else {
					this.liveState = 'loading';
				}
				console.log('live-player code:', e.detail.code)
			},
			error(e){
				this.liveState = 'fail';
				console.error('live-player error:', e.detail.errMsg)
			},
			handlePress(type) {
				this.active = type;
			},
			reset() {
				this.active = '';
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
	.live-loading {
		width: 100%;
		height: 430rpx;
		text-align: center;
		line-height: 430rpx;
		color: #fff;
	}
</style>

<style lang="scss" scoped>
	.video-box {
		height: 460rpx;
	}
	.video-title {
		padding: 32rpx;
		font-size: 32rpx;
		color: #333;
		line-height: 32rpx;
	}

	.button-group {
		width: 400rpx;
		height: 400rpx;
		margin: 32rpx auto;
	}

	.outter-circle {
		position: relative;
		width: 380rpx;
		height: 380rpx;
		background-color: #f2f2f2;
		border-radius: 100%;
		overflow: hidden;
		transform-origin: center;
		transform: rotate(45deg);
		box-shadow: 0 0px 12rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.inner-parts {
		float: left;
		width: 190rpx;
		height: 190rpx;
		line-height: 190rpx;
		text-align: center;
	}
	.inner-circle {
		position: absolute;
		margin-top: 95rpx;
		margin-left: 95rpx;
		width: 190rpx;
		height: 190rpx;
		line-height: 190rpx;
		text-align: center;
		border-radius: 100%;
		background-color: #f2f2f2;
	}

	.rotate {
		display: inline-block;
		transform: rotate(-45deg);
	}
</style>
